<template>
  <div inline
       class="mgt-18"
       v-if="btns.length>0">
    <el-button plain
               size="small"
               @click="exec(v.btnCode)"
               v-for="(v,i) in btns"
               :key="i"
               :type="v.btnCode=='del'?'danger':''">{{v.btnName}}</el-button>
  </div>
</template>

<script>

export default {
  inject: ['reload'],
  data () {
    return {
      btns: []
    }
  },
  created () {

    let menu = this.$store.state.menu;
    let currmenu = [];

    menu.forEach((item) => {

      item.children.forEach((temp) => {
        if (temp.name == this.$route.name) {

          currmenu = temp.meta.btns;
        }
      })

    })
    this.initBtn(currmenu)
  },
  watch: {
    $route (to, from) {
      // console.log(to, from)
      this.initBtn(to.meta.btns)
    }
  },
  methods: {
    initBtn (btns) {
      // console.log(btns);
      if (btns) {
        var compare = function (obj1, obj2) {
          var val1 = obj1.sort;
          var val2 = obj2.sort;
          if (val1 < val2) {
            // console.log(-1);
            return -1;
          } else if (val1 > val2) {
            // console.log(1);
            return 1;
          } else {
            // console.log(0);
            return 0;
          }
        }
        this.btns = btns.sort(compare);
        // console.log(this.btns)
      }
    },
    exec (fun) {
      this.$emit('exec', fun);
    }
  }
};
</script>

<style lang="less" scoped>
</style>
